package com.ecomemerce.app.comment.widgets

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.Placeholder
import androidx.compose.ui.text.PlaceholderVerticalAlign
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage

import com.ecomemerce.app.R
data class Product(val name: String, val price: String, val imageUrl: String)

@Composable
@Stable
fun ProductList() {
    val products = listOf(
        Product("乐事薯片", "85.20 AED", "https://example.com/chips.jpg"),
        Product("新鲜白菜", "85.20 AED", "https://example.com/cabbage.jpg")
    )
    Column {
        products.forEach { it ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                AsyncImage(
                    model = it.imageUrl,
                    contentDescription = null,
                    modifier = Modifier.size(80.dp)
                )

                Column(modifier = Modifier.padding(8.dp)) {
                    Text(it.name, fontWeight = FontWeight.Bold)
                    PriceText(it.price)
                }
            }
        }
    }
}

@Composable
fun ProductCard(product: Product1) {
    Column(
        modifier = Modifier
            .width(120.dp)
            .padding(8.dp)
            .background(Color.White, shape = RoundedCornerShape(8.dp))
            .padding(8.dp)
    ) {
        // 商品图片
        AsyncImage(
            model = product.imageUrl,
            contentDescription = product.name,
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp)
        )

        Spacer(modifier = Modifier.height(4.dp))

        PromotionalContentWithImage()

        Spacer(modifier = Modifier.height(4.dp))


        PriceText(product.price)


        Text(
            text = product.originalPrice,
            fontSize = 12.sp,
            lineHeight = 12.sp,
            color = Color.Gray,
            textDecoration = TextDecoration.LineThrough
        )

        Spacer(modifier = Modifier.height(4.dp))

        // 添加按钮
        Icon(
            imageVector = Icons.Default.Add,
            contentDescription = "添加",
            tint = Color.Black
        )
    }
}


//图文并排
@Composable
fun PromotionalContentWithImage() {
    // 定义图片的 InlineTextContent
    val inlineContentMap = mapOf(
        "icon" to InlineTextContent(
            Placeholder(
                width = 20.sp,
                height = 20.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
            )
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background), // 替换为您的图标资源
                contentDescription = "New User Icon",
                modifier = Modifier.size(20.dp))
        }
    )

    // 构建 AnnotatedString
    val annotatedString = buildAnnotatedString {
        // 插入图片
        appendInlineContent("icon", "[icon]")
        append(" ")
        withStyle(style = SpanStyle(
            color = Color.Red,
            fontWeight = FontWeight.Bold,
            fontSize = 9.sp
        )
        ) {
            append("新人专享")
        }
        append(" ") // 添加空格
        withStyle(style = SpanStyle(color = Color.Black, fontSize = 9.sp)) {
            append("乐事薯片越吃越好吃...")
        }
    }

    // 显示文本和图片
    Text(
        text = annotatedString,
        inlineContent = inlineContentMap,
        style = TextStyle(lineHeight = 14.sp) // 设置行间距
    )
}

